<template>
  <editionSwitch @editionChange = 'editionChange' :edition = "isNewCardStyle">
    <template slot='old_edition'>
      <right class="business">
        <template slot="card">
          <CardGroup ref="cardgroup"></CardGroup>
        </template>
        <template slot="detail">
          <keep-alive>
            <router-view>
            </router-view> 
          </keep-alive>
        </template>
      </right>
    </template>
    <template slot='new_edition'>
      <SideBarLayout>
        <template slot="sidebar">
          <sidebar></sidebar>
        </template>
        <template slot="detail">
           <SideBarBusiness></SideBarBusiness>
        </template>
      </SideBarLayout>
    </template>
  </editionSwitch>
</template>
<script>
  import editionSwitch from '@/components/public-modules/public-switch/index'
  import right from '@/components/ui-modules/right-layout/RightLayout'
  import SideBarLayout from '@/components/ui-modules/right-layout/SideBarLayout'
  import CardGroup from './BusinessCardGroup.vue'
  import SideBarBusiness from './SideBarBusiness.vue'
  import Sidebar from './BusinessSideBarLeft.vue'
  export default {
    name: 'Business',
    data () {
      return {
        currentRoute: '',
        provideData: {
          show: false
        },
        currentEdition: false
      }
    },
    methods: {
      editionChange (type) {
        console.log(type, 'edition')
      }
    },
    computed: {
      isNewCardStyle () {
        return this.$store.state.isNewCardStyle.business ? 'new' : 'old'
        // return this.currentEdition ? 'new' : 'old'
      }
    },
    mounted () {
      let state = 'old'
      if (this.$store.state.session.user.viewSwitch) {
        state = this.$store.state.session.user.viewSwitch['business'] ? this.$store.state.session.user.viewSwitch['business'] : 'old'
      }
      let stateBoolean = state === 'new'
      this.$store.commit('IS_NEW_CARD_STYLE', {type: 'business', data: stateBoolean})
    },
    provide () {
      return {
        provideData: this.provideData
      }
    },
    beforeRouteLeave (to, from, next) {
      this.currentRoute = from.fullPath
      this.provideData.show = false
      next()
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if (!vm.isNew) {
          vm.provideData.show = true
          if (to.query.active) {
            // 从其他模块push路由 必须带active参数，方便统一处理
          } else if (vm.currentRoute) {
            vm.$router.push({path: vm.currentRoute})
            vm.$refs.cardgroup.blank()
          }
        }
      })
    },
    components: {
      editionSwitch,
      right,
      CardGroup,
      Sidebar,
      SideBarLayout,
      SideBarBusiness
    }
  }
</script>
<style lang="stylus">
  @import "../../../assets/common.styl"
  .card-tooltip.el-tooltip__popper.is-light
    background-color $c-bus-tip
    border 1px solid #e0e0e0
    width 300px
    box-sizing border-box
    padding 14px
    max-height 80%vh
    overflow-y auto
    transform-origin none
  .card-tooltip.el-tooltip__popper.is-light[x-placement^="right"]
    margin-left 8px
  .business
    #pane-business
      height calc(100vh - 171px)
      overflow auto

</style>
